<template>
<app-framework :banner="banner">
  <content-container>
    <div class="product-desc">
      <p>《商圣弟子班》是由一群高能量的教导型企业家共同组成资源共享、系统学习、终身学习的高端一把手社群。以传承中华商圣陶朱公精神和商业智慧，培养教导型企业家，打造教导型组织，引领新商业精神文明崛起为使命；旨在传播商圣精神，学习商圣智慧，践行商圣之道，帮助更多企业家以商入圣、自觉利他、五福人生!</p>
    </div>
    <section class="article">
      <div class="article_title flex">
        <h2 class="title">弟子风采<br/>Alumni style</h2>
        <div class="flex-1"></div>
      </div>
      <div style="margin-bottom:20px;">
        <nuxt-link class="flex flex-strength article_item" v-for="(item, index) of articles.data" :key="index" :to="'/article?table=' + table + '&id='+item.id">
          <div class="article_item_img" :style="{backgroundImage:'url(' + item.img + ')'}"></div>
          <div class="flex-1 flex flex-column flex-strength article_desc">
            <p class="flex-1 text">{{ item.desc }}</p>
            <div class="flex">
              <span class="time">{{item.created_at}}</span>
              <span class="flex-1"></span>
              <span class="more">More</span>
            </div>
          </div>
        </nuxt-link>
      </div>
    </section>
  </content-container>
</app-framework>
</template>

<script>
import AppFramework from '../../components/AppFramework'
import ContentContainer from '../../components/ContentContainer'
import { getArticles } from '../../api/index-api'

export default {
  name: 'BusinessStudent',
  components: {ContentContainer, AppFramework},
  data() {
    return {
      table: 'shangshendizi_article',
      banner: [
        {img: '/images/banner-dizi.jpg'}
      ],
      articles: {
        data: []
      }
    }
  },
  created() {
    this.pageArticle()
  },
  methods: {
    pageArticle() {
      getArticles(this.table, 1).then(res => {
        this.articles.data = res.data.data
      }).then(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
.product-desc{
  padding: 20px 0;
  p{
    margin:10px 0;
    line-height: 1.6;
    font-size: 14px;
    text-indent: 2em;
  }
}

.article{
  .article_title{
    margin-bottom: 20px;
    .title{
      padding-bottom: 5px;
      border-bottom: 2px solid $color-yellow;
    }
  }

  .article_item{
    margin-bottom:20px;
    background-color: #eaeaea;
    width: 49%;
    height: 20vh;
    min-height: 200px;
    float: left;
    text-decoration: none;
    &:nth-child(2n) {
      margin-left: 2%;
    }
    .article_item_img{
      width: 50%;
      max-width: 500px;
      background-size: cover;
      background-position: center;
    }

    .article_desc{
      padding: 20px;
      color: #000;
      .text{
        font-size: 14px;
      }
    }
    .time, .more{
      color: #666;
    }
    .more{
      border: 1px solid #666;
      padding: 1px 10px;
      border-radius: 2px;
      cursor: pointer;
    }
  }
}
</style>
